<template>
  <div class="enumdata-container">
    <el-row class="posirow" :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="table-box">
            <KingTable
              ref="leftKingTable"
              :tableOptions="_leftTableOptions"
              @handle-cell-click="handleRowClick"
              @handle-btn-click="handleLeftBtnAction"
            >
              <!-- 表格操作 -->
              <template #operation="scope">
                <TableRowBtns :row="scope.row" :detailShow="false" @handle-row-action="handleLeftBtnAction" />
              </template>
            </KingTable>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="table-box">
            <KingTable ref="rightKingTable" :tableOptions="_rightTableOptions" @handle-btn-click="handleRightBtnAction">
              <!-- 表格操作 -->
              <template #operation="scope">
                <TableRowBtns :row="scope.row" :detailShow="false" @handle-row-action="handleRightBtnAction" />
              </template>
              <template #tableHeaderBtnAfter>
                <span class="right-dicttype-name">{{ curDictTypeName }}</span>
              </template>
            </KingTable>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <Edit ref="editRef" @fetch-data="fetchLeftTableData" />
    <subDataEdit ref="editsubRef" @fetch-data="fetchRightTableData" />
  </div>
</template>

<script setup lang="tsx" name="DictList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import TableRowBtns from "@/components/KingTable/components/TableRowBtns.vue";
import { operateType } from "@/plugins/commonType.enum";
import Edit from "./components/dictEdit.vue";
import subDataEdit from "./components/dictSubEdit.vue";
import { failMsg } from "@/utils/MessageUtils";

//当前选中的字典类型名称
const curDictTypeName = ref("");

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const leftKingTable = ref();
const rightKingTable = ref();

const editRef = ref();
const editsubRef = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _leftInitParam = reactive({ EQ_ss: 1, sorts: "mts@desc" });
const _rightInitParam = reactive({ EQ_mainid: "", EQ_ss: 1, sorts: "dictSort@asc" });

// 表格配置项
const _leftTableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "module",
    label: "所属模块",
    width: 100,
    dictCode: "Modules"
  },
  {
    prop: "dictType",
    label: "字典编码",
    width: 120
  },
  {
    prop: "dictName",
    label: "字典名称",
    overflow: true,
    width: 150
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

// 表格配置项
const _rightTableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "dictValue",
    label: "字典键值",
    width: 100
  },
  {
    prop: "dictLabel",
    label: "字典标签",
    width: 120
  },
  {
    prop: "dictSort",
    label: "字典排序",
    overflow: true,
    width: 100
  },
  {
    prop: "isDefault",
    label: "是否默认",
    overflow: true,
    width: 100,
    dictCode: "WhetherEnum"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

//搜索栏配置
const _leftSearchCols = [
  {
    prop: "EQ_module",
    label: "所属模块",
    width: 100,
    el: "select",
    dictCode: "Modules",
    showLabel: false
  },
  {
    prop: "LIKE_dictType",
    label: "字典类型",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "LIKE_dictName",
    label: "字典名称",
    width: 100,
    el: "input",
    showLabel: false
  }
];

//搜索栏配置
const _rightSearchCols = [
  {
    prop: "LIKE_dictValue",
    label: "字典键值",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "LIKE_dictLabel",
    label: "字典标签",
    width: 100,
    el: "input",
    showLabel: false
  }
];

const _leftTableOptions = {
  title: "字典管理",
  showReset: false,
  queryUrl: "system/dictType/query",
  operUrl: "system/dictType",
  tableColumns: _leftTableCols,
  searchColumns: _leftSearchCols,
  initParam: _leftInitParam
};

const _rightTableOptions = {
  title: "字典管理",
  showReset: false,
  queryAuto: false, // 打开页面不自动拉取table数据
  queryUrl: "system/dictData/query",
  operUrl: "system/dictData",
  tableColumns: _rightTableCols,
  searchColumns: _rightSearchCols,
  initParam: _rightInitParam
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleLeftBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: // 新增操作
      editRef.value.showDialog(row, type);
      break;
    case operateType.EDIT: // 编辑操作
      editRef.value.showDialog(row, type);
      break;
    case operateType.DETAIL: // 查询操作
      editRef.value.showDialog(row, type);
      break;
    case operateType.DEL: // 删除操作
      leftKingTable.value?.handleDelete(row);
      break;
    case operateType.BATCH_DEL: // 批量删除操作
      leftKingTable.value?.handleBatchDelete();
      break;
  }
};

const handleRightBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: // 新增操作
      if (_rightInitParam.EQ_mainid == "") {
        failMsg("请选择左边字典类型");
        return;
      }
      editsubRef.value.showSubEdit({ mainid: _rightInitParam.EQ_mainid }, type);
      break;
    case operateType.EDIT: // 编辑操作
      editsubRef.value.showSubEdit(row, type);
      break;
    case operateType.DETAIL: // 查询操作
      editsubRef.value.showSubEdit(row, type);
      break;
    case operateType.DEL: // 删除操作
      rightKingTable.value?.handleDelete(row);
      break;
    case operateType.BATCH_DEL: // 批量删除操作
      rightKingTable.value?.handleBatchDelete();
      break;
  }
};

// 主表点击事件
const handleRowClick = (param: any) => {
  _rightInitParam.EQ_mainid = param.row.id;
  curDictTypeName.value = "当前字典名称:" + param.row.dictName;
  //fetchRightTableData();//会监听请求参数，不需主动调用查询
};

// 重新拉取表格数据
const fetchLeftTableData = () => {
  leftKingTable.value?.getTableList();
};

const fetchRightTableData = () => {
  if (_rightInitParam.EQ_mainid == "") {
    failMsg("请选择左边字典类型");
    return;
  }
  rightKingTable.value?.getTableList();
};
</script>
<style lang="scss" scoped>
.right-dicttype-name {
  margin-left: 10px;
  font-size: 18px;
  color: #cccccc;
}
</style>
